布局原則

約束向下，大小向上，父設子位

flutter布局，依原則所述，就是:

• 父widget向子widget傳遞約束條件
• 子widget向父widget傳遞大小訊息
• 父widget決定子widget的位置

Ex.以房東、二房東和房客(父子widget)來做舉例:

房東有1間房，裡面有10間雅房(最大值)，房東問想租的房客需求，此時有三個房客各自提出需求:
1.房客甲:我想租6間雅房(大小向上)
2.房客乙:我想租3間雅房(大小向上)

此時

• 房客甲被限制只能租5雅房(約束向下)
• 房客乙租的3間雅房，房東幫他選定位置(位置)

約束種類

約束是由最小寬度、最大寬度、最小高度、最大高度四個方面構成。

而約束分為以下幾種

a).布局約束

• 嚴格約束(tight)
• 寬鬆約束(loose)

b).邊界約束

• 有邊界(bounded)
• 無邊界(unbounded)

這邊使用DartPad來進行示範解釋

1.嚴格布局約束(tight)

最大/最小寬高一致且相同
(當一個widget告訴它的子級必須變成某個大小的時候)

2.寬鬆布局約束(loose)

最小寬高為0，不超過父widget
(當一個widget告訴其子widget可以比自身更小的話)

簡單範例

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: Colors.red,
          child: Column(
            children: const [
              Text('Hi!'),
              Text('Test!'),
            ],
          ),
        ),
      )
    );
  }
}

這邊裝置螢幕強制將Scaffold變得和裝置螢幕一樣大(嚴格約束)，所以Scaffold填充螢幕。然後Scaffold告訴Container可以變為任意大小，但不能超出螢幕(寬鬆約束)。

3.有邊界約束(bounded)

大部分組件是有界bounded，也就是有寬高有最大值

4.無邊界約束(unbounded)

意味著約束的最大寬度或最大高度為double.INFINITY

當傳遞無邊界約束給類型為盡可能大的框時會失效，在 debug 模式下，則會拋出異常

Ex.當widget被置於flex boxes(Row和Column)內以及可滾動區域(ListView 和其它ScrollView的子類)內時

今天簡單介紹布局的種類，明天開始用實例來更深入介紹這些布局原則與約束